hotel_finder/app/templates/results.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店搜索结果</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <style>
        .result-card {
            border-top: 4px solid #0d6efd;
            transition: all 0.3s ease;
            margin-bottom: 1rem;
        }
        .result-card:hover {
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        }
        .hotel-card {
            border-left: 4px solid #0d6efd;
            transition: transform 0.2s;
        }
        .hotel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .platform-badge {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            margin-right: 0.3rem;
        }
        .platform-ly { background-color: #28a745; }
        .platform-ctrip { background-color: #0d6efd; }
        .platform-fliggy { background-color: #fd7e14; }
        .hotel-price {
            font-size: 1.2rem;
            font-weight: 700;
            color: #dc3545;
        }
        .hotel-rating {
            color: #ff9800;
            font-weight: 500;
        }
        .search-info {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }
        .filter-section {
            background-color: #f1f8ff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <div class="card shadow-lg mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h3 class="mb-0">酒店搜索结果</h3>
                <a href="/" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-arrow-left"></i> 返回搜索
                </a>
            </div>
            <div class="card-body search-info">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong><i class="bi bi-geo-alt"></i> 目的城市:</strong> {{ destination }}</p>
                        <p><strong><i class="bi bi-map"></i> 详细地址:</strong> {{ detail_destination }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="bi bi-calendar-check"></i> 入住日期:</strong> {{ check_in }}</p>
                        <p><strong><i class="bi bi-calendar-x"></i> 离店日期:</strong> {{ check_out }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label"><i class="bi bi-sort-down"></i> 排序方式</label>
                    <select class="form-select" id="sortSelect">
                        <option value="price_asc">价格 (从低到高)</option>
                        <option value="price_desc">价格 (从高到低)</option>
                        <option value="rating_desc">评分 (从高到低)</option>
                        <option value="distance_asc">距离 (从近到远)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label"><i class="bi bi-funnel"></i> 平台筛选</label>
                    <div class="d-flex flex-wrap">
                        <div class="form-check me-3">
                            <input class="form-check-input" type="checkbox" id="platform-ly" checked>
                            <label class="form-check-label" for="platform-ly">
                                <span class="badge platform-badge platform-ly">驴妈妈</span>
                            </label>
                        </div>
                        <div class="form-check me-3">
                            <input class="form-check-input" type="checkbox" id="platform-ctrip" checked>
                            <label class="form-check-label" for="platform-ctrip">
                                <span class="badge platform-badge platform-ctrip">携程</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="platform-fliggy" checked>
                            <label class="form-check-label" for="platform-fliggy">
                                <span class="badge platform-badge platform-fliggy">飞猪</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label"><i class="bi bi-sliders"></i> 价格区间</label>
                    <div class="d-flex">
                        <input type="number" class="form-control me-2" placeholder="最低价">
                        <input type="number" class="form-control" placeholder="最高价">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label"><i class="bi bi-star"></i> 最低评分</label>
                    <select class="form-select">
                        <option value="0">不限</option>
                        <option value="3">3分以上</option>
                        <option value="4">4分以上</option>
                        <option value="4.5">4.5分以上</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 酒店列表 -->
        <div class="row" id="hotelList">
            {% for hotel in hotels %}
            <div class="col-md-6 mb-4">
                <div class="card hotel-card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ hotel.name }}</h5>
                        <div class="mb-2">
                            {% if hotel.platform_ly %}
                            <span class="badge platform-badge platform-ly">驴妈妈</span>
                            {% endif %}
                            {% if hotel.platform_ctrip %}
                            <span class="badge platform-badge platform-ctrip">携程</span>
                            {% endif %}
                            {% if hotel.platform_fliggy %}
                            <span class="badge platform-badge platform-fliggy">飞猪</span>
                            {% endif %}
                        </div>
                        <div class="row mb-3">
                            {% if hotel.price_ly %}
                            <div class="col-md-4">
                                <div class="d-flex flex-column">
                                    <small class="text-muted">驴妈妈价:</small>
                                    <span class="hotel-price">¥{{ hotel.price_ly }}</span>
                                </div>
                            </div>
                            {% endif %}
                            {% if hotel.price_ctrip %}
                            <div class="col-md-4">
                                <div class="d-flex flex-column">
                                    <small class="text-muted">携程价:</small>
                                    <span class="hotel-price">{{ hotel.price_ctrip }}</span>
                                </div>
                            </div>
                            {% endif %}
                            {% if hotel.price_fliggy %}
                            <div class="col-md-4">
                                <div class="d-flex flex-column">
                                    <small class="text-muted">飞猪价:</small>
                                    <span class="hotel-price">¥{{ hotel.price_fliggy }}</span>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted">评分:</small>
                                <div>
                                    {% if hotel.rating_ly %}
                                    <span class="hotel-rating">{{ hotel.rating_ly }}</span>
                                    <small class="text-muted">(驴妈妈 {{ hotel.comment_ly }}条点评)</small><br>
                                    {% endif %}
                                    {% if hotel.rating_ctrip %}
                                    <span class="hotel-rating">{{ hotel.rating_ctrip }}</span>
                                    <small class="text-muted">(携程 {{ hotel.comment_ctrip }})</small><br>
                                    {% endif %}
                                    {% if hotel.rating_fliggy %}
                                    <span class="hotel-rating">{{ hotel.rating_fliggy }}</span>
                                    <small class="text-muted">(飞猪 {{ hotel.comment_fliggy }})</small>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">距离:</small>
                                <div>
                                    {% if hotel.distance_ly %}
                                    <small>{{ hotel.distance_ly }}</small><br>
                                    {% endif %}
                                    {% if hotel.distance_ctrip %}
                                    <small>{{ hotel.distance_ctrip }}</small><br>
                                    {% endif %}
                                    {% if hotel.distance_fliggy %}
                                    <small>{{ hotel.distance_fliggy }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white">
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-info-circle"></i> 查看详情
                            </button>
                            <a href="#" class="btn btn-sm btn-success">
                                <i class="bi bi-check-circle"></i> 立即预定
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有酒店卡片元素
            const hotelList = document.getElementById('hotelList');
            const hotels = Array.from(hotelList.querySelectorAll('.col-md-6'));
            
            // 排序功能
            document.getElementById('sortSelect').addEventListener('change', function() {
                sortHotels(this.value);
            });
            
            // 平台筛选功能
            document.getElementById('platform-ly').addEventListener('change', filterHotels);
            document.getElementById('platform-ctrip').addEventListener('change', filterHotels);
            document.getElementById('platform-fliggy').addEventListener('change', filterHotels);
            
            // 价格筛选功能
            const minPriceInput = document.querySelector('input[placeholder="最低价"]');
            const maxPriceInput = document.querySelector('input[placeholder="最高价"]');
            minPriceInput.addEventListener('input', filterHotels);
            maxPriceInput.addEventListener('input', filterHotels);
            
            // 评分筛选功能
            const ratingSelect = document.querySelector('.col-md-3:last-child select');
            ratingSelect.addEventListener('change', filterHotels);
            
            // 排序函数
            function sortHotels(sortType) {
                const sortedHotels = [...hotels]; // 复制数组
                
                switch(sortType) {
                    case 'price_asc':
                        sortedHotels.sort((a, b) => {
                            const priceA = getLowestPrice(a);
                            const priceB = getLowestPrice(b);
                            return priceA - priceB;
                        });
                        break;
                        
                    case 'price_desc':
                        sortedHotels.sort((a, b) => {
                            const priceA = getLowestPrice(a);
                            const priceB = getLowestPrice(b);
                            return priceB - priceA;
                        });
                        break;
                        
                    case 'rating_desc':
                        sortedHotels.sort((a, b) => {
                            const ratingA = getHighestRating(a);
                            const ratingB = getHighestRating(b);
                            return ratingB - ratingA;
                        });
                        break;
                        
                    case 'distance_asc':
                        sortedHotels.sort((a, b) => {
                            const distA = getShortestDistance(a);
                            const distB = getShortestDistance(b);
                            return distA - distB;
                        });
                        break;
                }
                
                // 重新排列DOM元素
                hotelList.innerHTML = '';
                sortedHotels.forEach(hotel => hotelList.appendChild(hotel));
            }
            
            // 筛选函数
            function filterHotels() {
                const showLy = document.getElementById('platform-ly').checked;
                const showCtrip = document.getElementById('platform-ctrip').checked;
                const showFliggy = document.getElementById('platform-fliggy').checked;
                
                const minPrice = parseFloat(minPriceInput.value) || 0;
                const maxPrice = parseFloat(maxPriceInput.value) || Infinity;
                
                const minRating = parseFloat(ratingSelect.value) || 0;
                
                hotels.forEach(hotel => {
                    // 平台筛选
                    const hasLy = hotel.querySelector('.platform-ly') !== null;
                    const hasCtrip = hotel.querySelector('.platform-ctrip') !== null;
                    const hasFliggy = hotel.querySelector('.platform-fliggy') !== null;
                    
                    const platformMatch = 
                        (showLy && hasLy) || 
                        (showCtrip && hasCtrip) || 
                        (showFliggy && hasFliggy);
                    
                    // 价格筛选
                    const lowestPrice = getLowestPrice(hotel);
                    const priceMatch = (lowestPrice >= minPrice && lowestPrice <= maxPrice);
                    
                    // 评分筛选
                    const highestRating = getHighestRating(hotel);
                    const ratingMatch = highestRating >= minRating;
                    
                    // 应用筛选
                    if (platformMatch && priceMatch && ratingMatch) {
                        hotel.style.display = '';
                    } else {
                        hotel.style.display = 'none';
                    }
                });
            }
            
            // 获取酒店最低价格
            function getLowestPrice(hotelElement) {
                const prices = Array.from(hotelElement.querySelectorAll('.hotel-price'))
                    .map(el => {
                        // 移除非数字字符（如 ¥ 符号）
                        return parseFloat(el.textContent.replace(/[^\d.]/g, ''));
                    })
                    .filter(price => !isNaN(price));
                
                return prices.length > 0 ? Math.min(...prices) : Infinity;
            }
            
            // 获取酒店最高评分
            function getHighestRating(hotelElement) {
                const ratings = Array.from(hotelElement.querySelectorAll('.hotel-rating'))
                    .map(el => parseFloat(el.textContent))
                    .filter(rating => !isNaN(rating));
                
                return ratings.length > 0 ? Math.max(...ratings) : 0;
            }
            
            // 获取酒店最短距离（通过简单的字符串比较）
            function getShortestDistance(hotelElement) {
                const distanceTexts = Array.from(hotelElement.querySelectorAll('.col-md-6:nth-child(2) small:not(.text-muted)'))
                    .map(el => el.textContent);
                
                // 简单处理: 提取数字部分（例如 "726米距西直门地铁站" -> 726）
                const distances = distanceTexts.map(text => {
                    const matches = text.match(/(\d+)/);
                    return matches ? parseInt(matches[1]) : 9999;
                });
                
                return distances.length > 0 ? Math.min(...distances) : 9999;
            }
            
            // 初始排序（默认价格从低到高）
            sortHotels('price_asc');
        });
    </script>
    </body>
</html>